<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - Bootstrap Table</title>

<link href="assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="assets/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="assets/css/plugins/chosen/chosen.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">

		<!-- Panel Other -->


		<div class="row">

			<div class="col-sm-12">

				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>营销推广案</h5>
					</div>
					<div class="ibox-content">
						<div class="row">
							<div class="col-lg-12">
								<form role="form" class="form-inline">

									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon">营销活动类型</span> <select class="form-control">
												<option>请输入用户名</option>
												<option value="1">选项1</option>
												<option value="2">选项2</option>
												<option value="3">选项3</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<select class="form-control">
											<option>请选择营销类型</option>
											<option value="1">选项1</option>
											<option value="2">选项2</option>
											<option value="3">选项3</option>
										</select>
									</div>
									<div class="form-group">
										<input id="actEndDate" class="laydate-icon form-control layer-date"  name="actEndDate" > 
									</div>
									<div class="form-group">
										<input name="keyWord" id="keyWord" type="text" placeholder="请输入关键词" id="exampleInputPassword2"
											class="form-control">
									</div>
									<div class="checkbox m-l m-r-xs">
										<label class="i-checks"> <input type="checkbox"><i></i> 自动登录
										</label>
									</div>
									<button id="queryBtn" class="btn btn-primary" type="button">
										<i class="fa fa-search"></i>&nbsp;搜索
									</button>
								</form>
							</div>
						</div>

						<div class="hr-line-dashed"></div>
						<div>

							<div>
								<button id="btnAddExecInst" class="btn  btn-white " type="button">
									<i class="fa fa-plus"></i>&nbsp;添加
								</button>
								<button id="btnModExecInst" class="btn  btn-white " type="button">
									<i class="fa fa-trash-o"></i>&nbsp;删除
								</button>

							</div>

							<table id="execInstTable" data-height="452" data-mobile-responsive="true">

							</table>
						</div>
					</div>

				</div>
			</div>
			<!-- End Panel Other -->
		</div>

		<!-- 全局js -->
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.min.js?v=3.3.6"></script>
		<script src="assets/js/extJquery.js"></script>

		<!-- 自定义js -->
		<script src="assets/js/content.js?v=1.0.0"></script>
	    <!-- layer javascript -->
	    <script src="assets/js/plugins/layer/layer.js"></script> 
	    <script src="assets/js/plugins/laydate/laydate.js"></script>

		<!-- Bootstrap table -->
		<script src="assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="assets/js/plugins/iCheck/icheck.min.js"></script>
		<script src="assets/js/plugins/chosen/chosen.jquery.min.js"></script>
		<script type="text/javascript">
		laydate({
		    elem: '#actEndDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
		    event: 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
			var channelData = {
				1 : '短厅',
				8 : '网厅',
				9 : '掌厅APP'
			};
			$(document).ready(function() {
				$('.i-checks').iCheck();
			});
			var layerIndex; 
			$('#btnAddExecInst').click(
					function() {
						layerIndex = layer.open({
					        type: 2,
					        title: '营销推广案新增',
					        btn: ['确认', '关闭'], //可以无限个按钮
					        yes: function(){
								var ifnameName="layui-layer-iframe"+layerIndex;//获得layer层的名字
								var iFrame=window.frames[ifnameName].document;//window.frames["iframeChild"].document
								var object = $.serializeObject($('#execInstAddForm',iFrame));
								console.info(object); 
								//var rtn = $('#execInstAddForm',iFrame).validate().form();
								//alert(rtn);
								var rtn =  window.frames[ifnameName].$('#execInstAddForm').validate().form();
								alert(rtn);
					        }, 
					        btn2: function(){ 
					        	//alert('close');
					        },
					        cancel: function(){ 
					        	//alert('cancel');
					        },
					        shadeClose: true, //点击遮罩关闭层
					        area : ['800px','500px'],
					        content: '/execInstAdd'
					    });
					});
			
			$('#queryBtn').click(
					function() {
						$('#execInstTable').bootstrapTable('showLoading')
								.bootstrapTable('refresh');
					});
			$('#execInstTable')
					.bootstrapTable(
							{
								columns : [
										{
											field : 'actStatus',
											title : '当前状态',
											formatter : function(value, row,index) {
												var html;
												switch (value) {
												case 1:
													html = '<span class="label label-primary">进行中';
													break;
												case 3:
													html = '<span class="label label-danger">暂&nbsp;停';
													break;
												case 4:
													html = '<span class="label">终&nbsp;止';
													break;
												default:
													html = '';
												}

												return html;
											}

										},
										{
											field : 'actId',
											title : '推广案编号',
											sortable : true
										},
										{
											field : 'actName',
											title : '营销推广案'
										},
										{
											field : 'actSequence',
											title : '活动优先级'
										},
										{
											field : 'actStartDate',
											title : '开始时间'
										},
										{
											field : 'actEndDate',
											title : '结束时间'
										},
										{
											field : 'actDriveType',
											title : '活动类型'
										},
										{
											field : 'actPeriod',
											title : '营销周期'
										},
										{
											field : 'actCustomerId',
											title : '客群编号'
										},
										{
											field : 'actEventId',
											title : '事件编号'
										},
										{
											field : 'actChannelType',
											title : '营销渠道',
											formatter : function(value, row,index) {
												return valueFormat(value,channelData);
											}
										} ],
								sortName : 'actId',
								sortOrder : 'desc',
								pagination : true,
								striped : true,
								sidePagination : 'server',
								clickToSelect : true,
								pageNumber : 1,
								pageSize : 10,
								pageList : [ 10, 20 ],
								queryParamsType : '',
								queryParams : function(params) {
									console.info(params);
									return {
										keyWord : $('#keyWord').val(),
										pageNumber : params.pageNumber,
										pageSize : params.pageSize,
										sort : params.sortName,
										order : params.sortOrder
									}
								},
								url : '${ctx}/queryExecInstuction'
							});
		</script>
</body>

</html>
